import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
import { Row, Col, Upload, Spin, Card, Form, Button, Timeline } from "antd";
import Acceptance from "./Acceptance";
import styles from '../../Pbulic.less';

@connect(({ repair, global }) => ({
  baseUrl:global.baseUrl,
  dictionaries:global.dictionaries,
  selectSource:global.selectSource,
  detaildata:repair.detaildata,
  processData:repair.processData,
  loading:repair.loading.detailinfo,
  loadingsubmit:repair.loading.model_submit,
}))
export default class DetailInfo extends PureComponent {
  constructor(props) {
    super(props);
    this.detailInfoId = this.props.match.params.id && this.props.match.params.id!='detail' ? this.props.match.params.id : 0;
  }

  componentDidMount() {
    const {dispatch} = this.props;
    // 维保单位列表
    dispatch({
      type: 'global/fetch_select_maintencompany',
    });

    dispatch({
      type: "repair/fetch_repair_info",
      payload: {
        repairId:this.detailInfoId
      }
    })
    .then(()=>{
      const repairId=this.props.detaildata && this.props.detaildata.repairId;
      repairId && dispatch({
        type: "repair/fetch_repair_handle",
        payload: {
          repairId,
        }
      })
    })
  }

  renderTimeline() {
    const { selectSource, detaildata,processData, dispatch, loadingsubmit, baseUrl  } = this.props;

    const repairStatus = detaildata.status;
    const lastStatus = processData && processData.length>0 ? processData[0].eventStatus : 0;
    const result_arr=[];


    processData && processData.length>0 && processData.forEach((item) => {
      // 只有在最后的审核中才显示
      if((item.eventStatus!=="02" && item.eventStatus!=="05" && item.eventStatus!=="06") ||
        (item.eventStatus === "02" && repairStatus===lastStatus && lastStatus===item.eventStatus) ||
        (item.eventStatus === "05" && repairStatus===lastStatus && lastStatus===item.eventStatus) ||
        (item.eventStatus === "06" && repairStatus===lastStatus && lastStatus===item.eventStatus)
      )
      {
        result_arr.push(<Timeline.Item key={item.statusEventId}
                               // color={
                               //   (item.eventStatus == "03" && item.handleResult=="0") || (item.eventStatus == "06" && item.handleResult=="0") ? 'red' : item.eventStatus == "06"  ? 'green' : 'blue'}
        >
          <Acceptance
            status={item.eventStatus}
            isRole={false}
            data={item}
            detaildata={detaildata}
            repairStatus={repairStatus}
            lastStatus={lastStatus}
            repairId={detaildata.repairId}
            dispatch={dispatch}
            selectSource={selectSource}
            loadingsubmit={loadingsubmit}
            baseUrl={baseUrl}
          />
        </Timeline.Item>)
      }
    })

    return result_arr

  }

  render() {
    const { detaildata, loading, dictionaries, processData, dispatch, loadingsubmit, baseUrl  } = this.props;

    // const repairStatus = dictionaries.repairStatus && dictionaries.repairStatus.length>1
    //   ? dictionaries.repairStatus.map(item=>item.label)
    //   :[];



    return (
      <Fragment>
        {loading && <div className={"globalSpin"}><Spin spinning={loading}  /></div>}
        {
          !loading && detaildata && detaildata.repairId &&
          <Fragment>
          <Card bodyStyle={{padding:30}} className={styles.info_inner_card_timeline}  loading={detaildata.repairId ? false : true}>
            <Timeline>
              {this.renderTimeline()}


              {/*<Timeline.Item >*/}
                {/*<Acceptance*/}
                  {/*status={"01"}*/}
                  {/*isRole={false}*/}
                  {/*data={detaildata}*/}
                  {/*repairStatus={repairStatus}*/}
                  {/*repairId={detaildata.repairId}*/}
                  {/*dispatch={dispatch}*/}
                  {/*loadingsubmit={loadingsubmit}*/}
                  {/*baseUrl={baseUrl}*/}
                {/*/>*/}
              {/*</Timeline.Item>*/}
            </Timeline>



          </Card>
          </Fragment>
        }
      </Fragment>
    );
  }
}
